<template>
	<transition name="el-zoom-in-center">
		<div class="JNPF-preview-main">
			<div class="JNPF-common-page-header">
				<el-page-header @back="goBack" :content="!dataForm.id ? '新建' : isDetail ? '详情' : '编辑'"/>
				<div class="options">
					<el-button type="primary" @click="dataFormSubmit()" v-if="!isDetail">确 定</el-button>
					<el-button @click="goBack">取 消</el-button>
				</div>
			</div>
			<el-row :gutter="15"  class="main" :style="{margin: '0 auto',width:'100%'}">
			<el-form ref="elForm" :model="dataForm" size="medium" label-width="135px" label-position="right" :disabled="!!isDetail" >
				<el-col :span="12">
					<el-form-item label="姓名" prop="name" >
						<el-input v-model="dataForm.name" placeholder="请输入" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="性别" prop="sex"  >
						<el-select v-model="dataForm.sex" placeholder="请选择" clearable :style='{"width":"100%"}' >
							<el-option v-for="(item, index) in sexOptions" :key="index" :label="item.fullName" :value="item.id" ></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="民族" prop="mz"  >
						<el-input v-model="dataForm.mz" placeholder="请输入" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="籍贯" prop="jg"  >
						<el-input v-model="dataForm.jg" placeholder="请输入" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="出生年月" prop="csny"  >
						<el-date-picker v-model="dataForm.csny" placeholder="请选择" clearable :style='{"width":"100%"}' type="date" format="yyyy-MM-dd" value-format="timestamp" >
						</el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="学历" prop="xl"  >
						<el-input v-model="dataForm.xl" placeholder="请输入" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="专业" prop="zy"  >
						<el-input v-model="dataForm.zy" placeholder="请输入" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="毕业院校" prop="byyx" >
						<el-input v-model="dataForm.byyx" placeholder="请输入" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="政治面貌" prop="zzmm"  >
						<el-input v-model="dataForm.zzmm" placeholder="请输入" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="健康状况" prop="jkzk"  >
						<el-input v-model="dataForm.jkzk" placeholder="请输入" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="证件类型" prop="zjlx" required >
						<el-select v-model="dataForm.zjlx" placeholder="请选择" clearable :style='{"width":"100%"}' >
							<el-option v-for="(item, index) in zjlxOptions" :key="index" :label="item.fullName" :value="item.id" ></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="证件号码" prop="zjhm"  >
						<el-input v-model="dataForm.zjhm" placeholder="请输入" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="证件到期日期" prop="zjdqrq"  >
						<el-date-picker v-model="dataForm.zjdqrq" placeholder="请选择" clearable :style='{"width":"100%"}' type="date" format="yyyy-MM-dd" value-format="timestamp" >
						</el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="职位" prop="zw"  >
						<el-input v-model="dataForm.zw" placeholder="请输入" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="工龄" prop="gl"  >
						<el-input v-model="dataForm.gl" placeholder="请输入" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="联系电话" prop="lxdh"  >
						<el-input v-model="dataForm.lxdh" placeholder="请输入" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="资质证书" prop="zzzs" >
						<JNPF-UploadFz v-model="zzzsList" accept="" :fileSize="5" sizeUnit="MB" :limit="9" buttonText="点击上传" >
						</JNPF-UploadFz>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="电子邮箱" prop="dzyx"  >
						<el-input v-model="dataForm.dzyx" placeholder="请输入" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="资质证书名称" prop="zzzsmc"  >
						<el-input v-model="dataForm.zzzsmc" placeholder="请输入" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="资质证书有效期起" prop="zzzsyxqq"  >
						<el-date-picker v-model="dataForm.zzzsyxqq" placeholder="请选择" clearable :style='{"width":"100%"}' type="date" format="yyyy-MM-dd" value-format="timestamp" >
						</el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="资政证书有效期止" prop="zzzsyxqz"  >
						<el-date-picker v-model="dataForm.zzzsyxqz" placeholder="请选择" clearable :style='{"width":"100%"}' type="date" format="yyyy-MM-dd" value-format="timestamp" >
						</el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="人员培训主题" prop="rypxzt" required >
						<el-input v-model="dataForm.rypxzt" placeholder="请输入" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="所属部门" prop="ssbm"  >
						<el-select v-model="dataForm.ssbm" placeholder="请选择" clearable :style='{"width":"100%"}' >
							<el-option v-for="(item, index) in ssbmOptions" :key="index" :label="item.F_FullName" :value="item.F_Id" ></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="人员培训有效期起" prop="rypxyxqq"  >
						<el-date-picker v-model="dataForm.rypxyxqq" placeholder="请选择" clearable :style='{"width":"100%"}' type="date" format="yyyy-MM-dd" value-format="timestamp" >
						</el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="人员培训有效期止" prop="rypxyxqz"  >
						<el-date-picker v-model="dataForm.rypxyxqz" placeholder="请选择" clearable :style='{"width":"100%"}' type="date" format="yyyy-MM-dd" value-format="timestamp" >
						</el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="人员照片" prop="ryzp" >
						<JNPF-UploadImg v-model="ryzpList" accept="" :fileSize="5" sizeUnit="MB" :limit="9" >
						</JNPF-UploadImg>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="状态" prop="bz" >
							<el-select v-model="dataForm.bz" placeholder="请选择" clearable :style='{"width":"100%"}' >
							<el-option v-for="(item, index) in ztOptions" :key="index" :label="item.fullName" :value="item.id" ></el-option>
						</el-select>
					</el-form-item>
				</el-col>
			</el-form>
			</el-row>
		</div>
	</transition>

</template>
<script>
import request from '@/utils/request'
import {getDictionaryDataSelector}from '@/api/systemData/dictionary'
import {previewDataInterface}from '@/api/systemData/dataInterface'
export default {
    data() {
      return {
        visible: false,
        isDetail: false,
				tableData:[{
				  	date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
				}],
        dataForm: {
					name:undefined,
					sex:undefined,
					mz:undefined,
					jg:undefined,
					csny:undefined,
					xl:undefined,
					zy:undefined,
					byyx:undefined,
					zzmm:undefined,
					jkzk:undefined,
					zjlx:undefined,
					zjhm:undefined,
					zjdqrq:undefined,
					zw:undefined,
					gl:undefined,
					lxdh:undefined,
					zzzs:[],
					dzyx:undefined,
					zzzsmc:undefined,
					zzzsyxqq:undefined,
					zzzsyxqz:undefined,
					rypxzt:undefined,
					ssbm:undefined,
					rypxyxqq:undefined,
					rypxyxqz:undefined,
					ryzp:[],
					bz:undefined,

        },
        // rules: {
				// 		name:[
				// 		{
				// 			required:true,
				// 			message:'请输入姓名',
				// 			trigger:'blur'
				// 		},
				// 		],
				// 		sex:[
				// 		{
				// 			required:true,
				// 			message:'请输入性别',
				// 			trigger:'blur'
				// 		},
				// 		],
				// 		mz:[
				// 		{
				// 			required:true,
				// 			message:'请输入名族',
				// 			trigger:'blur'
				// 		},
				// 		],
				// 		jg:[
				// 		{
				// 			required:true,
				// 			message:'请输入籍贯',
				// 			trigger:'blur'
				// 		},
				// 		],
				// 		csny:[
				// 		{
				// 			required:true,
				// 			message:'请输入出生年月',
				// 			trigger:'blur'
				// 		},
				// 		],
				// 		xl:[
				// 		{
				// 			required:true,
				// 			message:'请输入学历',
				// 			trigger:'blur'
				// 		},
				// 		],
				// 		zy:[
				// 		{
				// 			required:true,
				// 			message:'请输入专业',
				// 			trigger:'blur'
				// 		},
				// 		],
				// 		byyx:[
				// 		{
				// 			required:true,
				// 			message:'请输入毕业院校',
				// 			trigger:'blur'
				// 		},
				// 		],
				// 		zzmm:[
				// 		{
				// 			required:true,
				// 			message:'请输入政治面貌',
				// 			trigger:'blur'
				// 		},
				// 		],
				// 		jkzk:[
				// 		{
				// 			required:true,
				// 			message:'请输入健康状况',
				// 			trigger:'blur'
				// 		},
				// 		],
				// 		zjlx:[
				// 		{
				// 			required:true,
				// 			message:'请输入证件类型',
				// 			trigger:'blur'
				// 		},
				// 		],
				// 		zjhm:[
				// 		{
				// 			required:true,
				// 			message:'请输入证件号码',
				// 			trigger:'blur'
				// 		},
				// 		],
				// 		zjdqrq:[
				// 		{
				// 			required:true,
				// 			message:'请输入证件到期日期',
				// 			trigger:'blur'
				// 		},
				// 		],
				// 		zw:[
				// 		{
				// 			required:true,
				// 			message:'请输入职位',
				// 			trigger:'blur'
				// 		},
				// 		],
				// 		gl:[
				// 		{
				// 			required:true,
				// 			message:'请输入工龄',
				// 			trigger:'blur'
				// 		},
				// 		],
				// 		lxdh:[
				// 		{
				// 			required:true,
				// 			message:'请输入联系电话',
				// 			trigger:'blur'
				// 		},
				// 		],
				// 		dzyx:[
				// 		{
				// 			required:true,
				// 			message:'请输入电子邮箱',
				// 			trigger:'blur'
				// 		},
				// 		],
				// 		zzzsmc:[
				// 		{
				// 			required:true,
				// 			message:'请输入资质证书名称',
				// 			trigger:'blur'
				// 		},
				// 		],
				// 		zzzsyxqq:[
				// 		{
				// 			required:true,
				// 			message:'请输入资质证书有效期起',
				// 			trigger:'blur'
				// 		},
				// 		],
				// 		zzzsyxqz:[
				// 		{
				// 			required:true,
				// 			message:'请输入资政证书有效期止',
				// 			trigger:'blur'
				// 		},
				// 		],
				// 		rypxzt:[
				// 		{
				// 			required:true,
				// 			message:'请输入人员培训主题',
				// 			trigger:'blur'
				// 		},
				// 		],
				// 		ssbm:[
				// 		{
				// 			required:true,
				// 			message:'请输入所属部门',
				// 			trigger:'blur'
				// 		},
				// 		],
				// 		rypxyxqq:[
				// 		{
				// 			required:true,
				// 			message:'请输入人员培训有效期起',
				// 			trigger:'blur'
				// 		},
				// 		],
				// 		rypxyxqz:[
				// 		{
				// 			required:true,
				// 			message:'请输入人员培训有效期止',
				// 			trigger:'blur'
				// 		},
				// 		],
				// 		bz:[
				// 		{
				// 			required:true,
				// 			message:'请选择状态',
				// 			trigger:'blur'
				// 		},
				// 		],

        // },
				ztOptions:[{"fullName":"过期","id":"过期"},{"fullName":"正常","id":"正常"}],
				sexOptions:[{"fullName":"男","id":"1"},{"fullName":"女","id":"2"}],
				zjlxOptions:[{"fullName":"居民身份证","id":"1"},{"fullName":"军人证","id":"2"},{"fullName":"港澳台居民身份证","id":"3"},{"fullName":"华侨身份证","id":"4"},{"fullName":"外籍护照","id":"5"},{"fullName":"其他","id":"6"}],
				ssbmOptions:[],

					zzzsList:[],
					ryzpList:[],

      }
    },
    created() {
		this.getssbmOptions();

    },
    methods: {
		getssbmOptions()
		{
			previewDataInterface('772d2cbcadd24df79243e3d92ef5f690').then(res => {
				this.ssbmOptions = res.data
			})
		},

           goBack() {
                    this.$emit('refresh')
                },
      init(id, isDetail) {

        this.dataForm.id = id || 0;
        this.visible = true;
        this.isDetail = isDetail || false;
        this.$nextTick(() => {
          this.$refs['elForm'].resetFields();
          if (this.dataForm.id) {
            request({
              url: '/api/System/wlry/' + this.dataForm.id,
              method: 'get'
            }).then(res =>{
              this.dataForm = res.data;
				this.zzzsList = this.dataForm.zzzs ? JSON.parse(this.dataForm.zzzs) : [];
				this.ryzpList = this.dataForm.ryzp ? JSON.parse(this.dataForm.ryzp) : [];

            })
          }
        })
      },
      // 表单提交
      dataFormSubmit() {
				this.$set(this.dataForm, 'zzzs', JSON.stringify(this.zzzsList));
				this.$set(this.dataForm, 'ryzp', JSON.stringify(this.ryzpList));

        this.$refs['elForm'].validate((valid) => {
          if (valid) {
            if (!this.dataForm.id) {
              request({
                url: '/api/System/wlry',
                method: 'post',
                data: this.dataForm,
              }).then((res) =>{
                this.$message({
                  message: res.msg,
                  type: 'success',
                  duration: 1000,
                  onClose: () =>{
                    this.visible = false;
                    this.$emit('refresh', true);
                  }
                })
              })
            } else {
              request({
                url: '/api/System/wlry/' + this.dataForm.id,
                method: 'PUT',
                data: this.dataForm
              }).then((res) =>{
                this.$message({
                  message: res.msg,
                  type: 'success',
                  duration: 1000,
                  onClose: () =>{
                    this.visible = false;
                    this.$emit('refresh', true);
                  }
                })
              })
            }
          }
        })
      },

    }
  }
  </script>